<template>
  <div class="goods" v-loading="loading1">
    <div class="menu-wrapper" ref="menuWrapper">
      <ul>
        <li class="search-btn">
          <span><img width="20" height="20" src="../assets/search.png" alt=""></span>
          <span>搜索</span>
        </li>
        <li class="emptyCategory" v-if="category.length===0">无分类</li>
        <li class="menu-item"
            v-if="category.length>0"
            v-for="(item,index) in category"
            :key="index"
            @click="getGoods(item.id,index)"
            :class="{'current':currentIndex===index}"
        >
          <span class="cate-name">{{item.classification}}</span>
        </li>
      </ul>
    </div>
    <div class="goods-wrapper" ref="foodsWrapper" v-loading="loading">
      <ul>
        <li class="emptyGoods" v-if="goods.length===0">无菜品</li>
        <li class="food-item"
            v-if="goods.length>0"
            v-for="(food,index) in goods"
            :key="index"
        >
          <div class="icon">
            <!--<img width="80" height="80" :src="food.icon" alt="">-->
            <img width="80" height="80"
                 src="http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114"
                 alt="">
          </div>
          <div class="food-content">
            <h2 class="name">{{food.foodsname}}</h2>
            <div class="spec">
              <span>小</span>
              <span>中</span>
              <span>大</span>
            </div>
            <div class="price">
              <span>¥{{food.order_sort}}</span>
              <span class="cartcontrol-wrapper">
                <CartControl :food="food"></CartControl>
              </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <ShopCart :select-foods="selectFoods"></ShopCart>
  </div>
</template>

<script>
  import axios from 'axios';
  import {basePath} from '../api/api_const';
  import BetterScroll from 'better-scroll'
  import ShopCart from './ShopCart'
  import CartControl from './CartControl'

  export default {
    name: 'Goods',
    components: {
      ShopCart,
      CartControl
    },
    data() {
      return {
        goods1: [
          {
            'name': '热销榜',
            'type': -1,
            'foods': [
              {
                'name': '皮蛋瘦肉粥',
                'price': 10,
                'oldPrice': '',
                'description': '咸粥',
                'sellCount': 229,
                'rating': 100,
                'info': '一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '很喜欢的粥',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 1,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '扁豆焖面',
                'price': 14,
                'oldPrice': '',
                'description': '',
                'sellCount': 188,
                'rating': 96,
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 1,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'info': '',
                'icon': 'http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '葱花饼',
                'price': 10,
                'oldPrice': '',
                'description': '',
                'sellCount': 124,
                'rating': 85,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 1,
                    'text': '没啥味道',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 1,
                    'text': '很一般啊',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '牛肉馅饼',
                'price': 14,
                'oldPrice': '',
                'description': '',
                'sellCount': 114,
                'rating': 91,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 1,
                    'text': '难吃不推荐',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '招牌猪肉白菜锅贴/10个',
                'price': 17,
                'oldPrice': '',
                'description': '',
                'sellCount': 101,
                'rating': 78,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 1,
                    'text': '不脆,不好吃',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '南瓜粥',
                'price': 9,
                'oldPrice': '',
                'description': '甜粥',
                'sellCount': 91,
                'rating': 100,
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '红豆薏米美肤粥',
                'price': 12,
                'oldPrice': '',
                'description': '甜粥',
                'sellCount': 86,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '八宝酱菜',
                'price': 4,
                'oldPrice': '',
                'description': '',
                'sellCount': 84,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '红枣山药糙米粥',
                'price': 10,
                'oldPrice': '',
                'description': '',
                'sellCount': 81,
                'rating': 91,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '糊塌子',
                'price': 10,
                'oldPrice': '',
                'description': '',
                'sellCount': 80,
                'rating': 93,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750'
              }
            ]
          },
          {
            'name': '单人精彩套餐',
            'type': 2,
            'foods': [
              {
                'name': '红枣山药粥套餐',
                'price': 29,
                'oldPrice': 36,
                'description': '红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注',
                'sellCount': 17,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750'
              }
            ]
          },
          {
            'name': '冰爽饮品限时特惠',
            'type': 1,
            'foods': [
              {
                'name': 'VC无限橙果汁',
                'price': 8,
                'oldPrice': 10,
                'description': '',
                'sellCount': 15,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '还可以',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750'
              }
            ]
          },
          {
            'name': '精选热菜',
            'type': -1,
            'foods': [
              {
                'name': '娃娃菜炖豆腐',
                'price': 17,
                'oldPrice': '',
                'description': '',
                'sellCount': 43,
                'rating': 92,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '菜量还可以,味道还可以',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '手撕包菜',
                'price': 16,
                'oldPrice': '',
                'description': '',
                'sellCount': 29,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '香酥黄金鱼/3条',
                'price': 11,
                'oldPrice': '',
                'description': '',
                'sellCount': 15,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750'
              }
            ]
          },
          {
            'name': '爽口凉菜',
            'type': -1,
            'foods': [
              {
                'name': '八宝酱菜',
                'price': 4,
                'oldPrice': '',
                'description': '',
                'sellCount': 84,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '拍黄瓜',
                'price': 9,
                'oldPrice': '',
                'description': '',
                'sellCount': 28,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/750/h/750'
              }
            ]
          },
          {
            'name': '精选套餐',
            'type': -1,
            'foods': [
              {
                'name': '红豆薏米粥套餐',
                'price': 37,
                'oldPrice': '',
                'description': '红豆薏米粥,三鲜干蒸烧卖,拍黄瓜',
                'sellCount': 3,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '皮蛋瘦肉粥套餐',
                'price': 31,
                'oldPrice': '',
                'description': '',
                'sellCount': 12,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/750/h/750'
              }
            ]
          },
          {
            'name': '果拼果汁',
            'type': -1,
            'foods': [
              {
                'name': '蜜瓜圣女萝莉杯',
                'price': 6,
                'oldPrice': '',
                'description': '',
                'sellCount': 1,
                'rating': '',
                'info': '',
                'ratings': [],
                'icon': 'http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '加多宝',
                'price': 6,
                'oldPrice': '',
                'description': '',
                'sellCount': 7,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': 'VC无限橙果汁',
                'price': 8,
                'oldPrice': 10,
                'description': '',
                'sellCount': 15,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '还可以',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750'
              }
            ]
          },
          {
            'name': '小吃主食',
            'type': -1,
            'foods': [
              {
                'name': '扁豆焖面',
                'price': 14,
                'oldPrice': '',
                'description': '',
                'sellCount': 188,
                'rating': 96,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 1,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '葱花饼',
                'price': 10,
                'oldPrice': '',
                'description': '',
                'sellCount': 124,
                'rating': 85,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 1,
                    'text': '没啥味道',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 1,
                    'text': '很一般啊',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '牛肉馅饼',
                'price': 14,
                'oldPrice': '',
                'description': '',
                'sellCount': 114,
                'rating': 91,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 1,
                    'text': '难吃不推荐',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '招牌猪肉白菜锅贴/10个',
                'price': 17,
                'oldPrice': '',
                'description': '',
                'sellCount': 101,
                'rating': 78,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 1,
                    'text': '不脆,不好吃',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '糊塌子',
                'price': 10,
                'oldPrice': '',
                'description': '',
                'sellCount': 80,
                'rating': 93,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750'
              }
            ]
          },
          {
            'name': '特色粥品',
            'type': -1,
            'foods': [
              {
                'name': '皮蛋瘦肉粥',
                'price': 10,
                'oldPrice': '',
                'description': '咸粥',
                'sellCount': 229,
                'rating': 100,
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '很喜欢的粥',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 1,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '南瓜粥',
                'price': 9,
                'oldPrice': '',
                'description': '甜粥',
                'sellCount': 91,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '红豆薏米美肤粥',
                'price': 12,
                'oldPrice': '',
                'description': '甜粥',
                'sellCount': 86,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '红枣山药糙米粥',
                'price': 10,
                'oldPrice': '',
                'description': '',
                'sellCount': 81,
                'rating': 91,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '鲜蔬菌菇粥',
                'price': 11,
                'oldPrice': '',
                'description': '咸粥',
                'sellCount': 56,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': ''
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/750/h/750'
              },
              {
                'name': '田园蔬菜粥',
                'price': 10,
                'oldPrice': '',
                'description': '咸粥',
                'sellCount': 33,
                'rating': 100,
                'info': '',
                'ratings': [
                  {
                    'username': '3******c',
                    'rateTime': 1469281964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '2******3',
                    'rateTime': 1469271264000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  },
                  {
                    'username': '3******b',
                    'rateTime': 1469261964000,
                    'rateType': 0,
                    'text': '',
                    'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
                  }
                ],
                'icon': 'http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/114/h/114',
                'image': 'http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/750/h/750'
              }
            ]
          }
        ],
        category: [], // 分类数组
        goods: [], // 分类中菜品数组
        allGoods: [],
        loading: false,
        loading1: false,
        currentIndex: 0// 第几个分类高亮
      }
    },
    methods: {
      // 查询分类
      getCategory() {
        this.loading1 = true;
        axios({
          method: 'get',
          url: basePath + 'xzg_order?storeId=003&s=sort'
        })
          .then((result) => {
            let res = JSON.parse(result.request.response);
            this.category = res.response.data;
            if (this.category.length > 0) {
              // 默认显示第一个分类
              let defaultCategoryId = this.category[0].id;
              axios({
                method: 'get',
                url: basePath + 'xzg_order/query_foods_order?storeId=003&foodscategory=' + defaultCategoryId + '&static_up_and_down=上市&s=order_sort'
              })
                .then((result1) => {
                  let res = JSON.parse(result1.request.response);
                  this.goods = res.response.data;
                  this.loading1 = false;
                })
                .catch(function (err) {
                  console.log(err);
                });
            } else {
              this.loading1 = false;
            }
          })
          .catch(function (err) {
            console.log(err);
          });
      },
      // 通过分类id查询goods
      getGoods(categoryId, index) {
        this.currentIndex = index;// 第几个分类高亮
        this.loading = true;
        axios({
          method: 'get',
          url: basePath + 'xzg_order/query_foods_order?storeId=003&foodscategory=' + categoryId + '&static_up_and_down=上市&s=order_sort'
        })
          .then((result) => {
            let res = JSON.parse(result.request.response);
            this.goods = res.response.data;
            this.loading = false;
          })
          .catch(function (err) {
            console.log(err);
          });
      },
      // 查询出所有goods
      getAllGoods() {
        axios({
          method: 'get',
          url: basePath + 'xzg_order/query_foods_order?storeId=003&static_up_and_down=上市&s=order_sort'
        })
          .then((result) => {
            let res = JSON.parse(result.request.response);
            this.allGoods = res.response.data;
            console.log(this.allGoods);
          })
          .catch(function (err) {
            console.log(err);
          });
      },
      // 实现可以上下滚动效果
      _initScroll() {
        this.menuScroll = new BetterScroll(this.$refs.menuWrapper, {
          click: true
        });
        this.foodsScroll = new BetterScroll(this.$refs.foodsWrapper, {
          click: true,
          probeType: 3
        });
      }
    },
    computed: {
      selectFoods() {
        let foods = [];
        // this.allGoods.forEach((good) => {
        //   if (good.count) {
        //     foods.push(good);
        //   }
        // });
        // console.log(21)
        // console.log(foods);
        return foods;
      }
    },
    created() {
      this.getCategory();// 进来获取分类
      this.getAllGoods();// 查询出门店下所有goods

      this.$nextTick(() => {
        this._initScroll();
      });
    }
  }
</script>

<style scoped lang="scss">
  .goods {
    display: flex;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 48px;
    overflow: hidden;
    .menu-wrapper {
      flex: 0 0 90px;
      width: 90px;
      background: #f6f6f6;
      .emptyCategory {
        width: 100%;
        text-align: center;
        line-height: 40px;
      }
      .search-btn {
        display: table;
        text-align: center;
        width: 70px;
        height: 50px;
        color: #666;
        font-size: 16px;
        line-height: 18px;
        padding: 0 10px;
        span {
          display: table-cell;
          width: 70px;
          vertical-align: middle;
        }
      }
      .menu-item {
        display: table;
        text-align: center;
        width: 70px;
        height: 50px;
        color: #666;
        font-size: 16px;
        line-height: 18px;
        padding: 0 10px;
        &.current {
          position: relative;
          z-index: 10;
          background: #fff;
          color: #f76763;
        }
        .cate-name {
          display: table-cell;
          width: 70px;
          vertical-align: middle;
        }
      }
    }
    .goods-wrapper {
      flex: 1;
      .emptyGoods {
        width: 100%;
        text-align: center;
        line-height: 40px;
      }
      .food-item {
        display: flex;
        margin: 20px 16px;
        padding-bottom: 9px;
        border-bottom: 1px dashed #dcdcdc;
        &:first-child {
          margin-top: 0;
          padding-top: 10px;
        }
        &:last-child {
          border-bottom: 0;
          margin-bottom: 0;
        }
        .icon {
          flex: 0 0 80px;
          margin-right: 10px;
        }
        .food-content {
          flex: 1;
          .name {
            margin: 2px 0 8px 0;
            min-height: 16px;
            line-height: 18px;
            font-size: 16px;
            color: #333;
          }
          .spec {
            height: 24px;
            span {
              display: inline-block;
              padding: 1px 5px;
              margin-top: 3px;
              border-radius: 2px;
              border: 1px solid #ccc;
            }
          }
          .price {
            margin-top: 8px;
            color: #f76763;
            font-size: 16px;
            span {
              display: inline-block;
            }
            .cartcontrol-wrapper {
              display: inline-block;
              float: right;
            }
          }
        }
      }
    }
  }
</style>
